<template>
  <div class="auth-page">
    <!-- 头部组件 -->
    <div class="header">
      <Header :is-login="isLogin" @update:is-login="onAuthModeChange" />
    </div>
    <!-- 主要内容区域 -->
    <div class="auth-content">
      <div class="form-container" >
        <form @submit.prevent="submitForm">
          <div  v-if="isLogin">
            <!-- 登录表单内容 -->
            <div class="form-content">
              <h2>登录</h2>
              <div class="input-group">
                <input type="text" placeholder="用户名" id="username-login" v-model="user.username" required>
              </div>
              <div class="input-group">
                <input type="password" placeholder="密码" id="password-login" v-model="user.password" required>
              </div>
            </div>
          </div>
          <div v-else>
            <!-- 注册表单内容 -->
            <div class="input-group">
              <h2>注册</h2>
              <input type="email" placeholder="邮箱" id="email-register" v-model="user.email" required>
            </div>
            <div class="input-group">
              <input type="text" placeholder="用户名" id="username-register" v-model="user.username" required>
            </div>
            <div class="input-group">
              <select id="select-option"  v-model="user.position" required>
                  <option value="">选择你的职位...</option> <!-- 占位符文本 -->
                  <option value="boss">老板</option>
                  <option value="teacher">教育部门</option>
                  <option value="it">IT技术部门</option>
                  <option value="finance">财政部门</option>
                  <option value="market">营销部门</option>
                  <option value="admin">行政部门</option>
                  <!-- 根据需要添加更多选项 -->
                </select>
              
            </div>
            <div class="input-group">
              <input type="password" placeholder="密码" id="password-register" v-model="user.password" required>
            </div>
            <div class="input-group">
              <input type="password" placeholder="确认密码" id="confirm-password-register" v-model="confirmPassword" required>
            </div>
          </div>
          <!-- 提交按钮 -->
          <button type="submit">{{ title }}</button>
          <!-- 其他操作按钮 -->
          <button @click="initLocalStorage">initLocalStorage</button>
        </form>
    </div>


    </div>
      
    
    <Footer/>
  </div>
</template>
<script>
import Header from '../components/L&A_Header.vue';
import Footer from '../components/Footer.vue';
// 模拟的用户数据库
const usersDB = {
  // 用户信息...
};
export default {
  name: 'Auth',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      isLogin: true, // 控制显示登录还是注册表单
      user: {
        username: '',
        password: '',
        },
      email: '',
      confirmPassword:'',// 用于存储注册时的确认密码
      position:'',
      token:''
    };
    
  },
  computed: {
    title() {
      return this.isLogin ? '登录' : '注册';
    }
  },
  methods: {
    submitForm() {      
      
      // 登录或注册逻辑
      if (this.isLogin) {
        // 执行登录操作
        if (this.signIn(this.user))
        {
          const user=JSON.parse(localStorage.getItem(this.signIn(this.user)));
          // 登录成功的逻辑
          console.log('登录成功，Token:',user.token);
          // 例如，跳转到主页
          // this.$router.push({ name: 'Dashboard' });
          this.$router.push({ name: 'HomePage', query: { token: user.token, position: user.position } });
        }else{
          // 登录失败的逻辑
          alert('登录失败，请检查用户名和密码')
        };
      } else {
        // 执行注册操作
        try {
          const token = this.register(this.user);
          if (token) {
            // 注册成功的逻辑
            alert('注册成功');
            console.log('注册成功，Token:', token);
            // this.$router.push({ name: 'Home' }); 
          }
          else
          {
            alert('用户名已存在');
          }
        } catch (error) {
          // 处理注册时的错误
          alert('注册失败!');
          console.error('注册失败:', error.message);
          // 显示错误消息
        }
      }
    },
    initLocalStorage() 
    {
        const initialUsers = [
          { username: 'boss', password: 'boss123',email:'2501558958@qq.com',position:'boss', },
          { username: 'Code', password: 'code123',email:'2501558958@qq.com',position:'it', },
          { username: 'fina', password: 'fina123',email:'2501558958@qq.com',position:'finance', },
          { username: 'teacher', password: 'teacher123',email:'2501558958@qq.com',position:'teacher',},
          { username: 'admin', password: 'admin123',email:'2501558958@qq.com',position:'admin',},
          // 可以添加更多用户信息
        ];
        initialUsers.forEach((user,index) => {
          console.log(user.username);
          setTimeout(()=>{
            if (!this.isUsernameTaken(user.username)) 
            {
            user.token= this.generateToken(user.username,user.password);
            this.storeUser(user);
            }},index * 100)
        });
    },
    onAuthModeChange(event) {
      this.isLogin = event;
    },
    register(userCredentials) {
      // 注册逻辑...
      // 首先，验证用户不存在
      if (!this.isUsernameTaken(userCredentials.username)) {
        // 如果用户名不存在，存储新用户信息
        // 生成 Token
        userCredentials.token= this.generateToken(userCredentials.username,userCredentials.password);
        
        this.storeUser(userCredentials);
        // console.log(token)
        return userCredentials.token;
      }
      else
      {
        // alert('用户名已存在');
        // throw new Error('用户名已存在');
      }
    },
    // 检查用户名是否已被使用
    isUsernameTaken(username) {
      // 遍历 localStorage 中存储的所有用户
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key && key.startsWith('user')) 
        {
          const user = JSON.parse(localStorage.getItem(key));
          if (user.username === username) {
            return true; // 用户名已存在
          }
        }
      }
      return false; // 用户名不存在
    },
      // 存储新用户信息到 localStorage
    storeUser(user) {
      const userKey = 'user' + Date.now(); // 使用时间戳作为用户的唯一标识
      localStorage.setItem(userKey, JSON.stringify(user));
    },
      // 根据用户凭证生成 Token
    generateToken(username,password) {
      // 使用 base64 编码用户名和密码作为 Tokenm.fgxdffghkhhghgkjhcg
      return btoa(username + ':' + password);
    },
    signIn(userCredentials) {
      // 验证用户名和密码
      if (this.validateCredentials(userCredentials)) {
        const key=this.validateCredentials(userCredentials)
        this.token = this.generateToken(userCredentials);
        return key;
      }
      else
      {
        return false;
      }
    },
    signOut() {
      // 清除 Token
      
      localStorage.removeItem('userToken');
    },
    validateCredentials({ username, password }) {
      // 验证用户名和密码是否存在于 usersDB 中
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key && key.startsWith('user')) 
        {
          const user = JSON.parse(localStorage.getItem(key));
          if (user.username === username&&user.password==password) {
            return key; //登陆成功
          }

        }
      }
      return false;
      // return usersDB[username] && usersDB[username] === password;
      return false;
    }
  }
};
</script>

<style scoped>
.auth-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* 防止内容溢出 */
}


/* 主要内容区域 */
.auth-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  width: 100%;
  min-height: 100vh; /* 确保至少为视口的全高 */
  background-image: url('../assets/haoweilailogo.png');
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
}

/* 表单容器 */
.form-container {
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px; /* 根据需要调整最大宽度 */
  margin-left: auto; /* 靠右对齐 */
  margin-right: 40px; /* 在最右边留出一些空间 */
}

/* 表单标题 */
h2 {
  text-align: center; /* 使标题文本居中 */
  margin-bottom: 20px; /* 与输入框保持一定空间 */
}

/* 输入框样式 */
.input-group input,
.input-group select {
  width: 100%; /* 宽度充满其容器 */
  padding: 15px; /* 增加内边距 */
  font-size: 18px; /* 增大字体大小 */
  margin-bottom: 20px; /* 增加与下一个元素的空间 */
  border-radius: 8px; /* 边框圆角 */
  border: 1px solid #ccc; /* 边框颜色 */
  box-sizing: border-box; /* 边框计算在宽度内 */
}

/* 表单内容 */
.form-content {
  display: flex;
  flex-direction: column;
}

/* 按钮样式 */
button {
  display: block;
  width: calc(100% - 20px); /* 减去内边距宽度 */
  margin: 10px 0;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

/* 底部区域 */
.footer {
  padding: 20px 0;
  text-align: center;
  background-color: #f8f9fa;
  border-top: 1px solid #e7e7e7;
}

.footer p {
  margin: 0;
  font-size: 14px;
}
</style>